<!--17最小轴径计算-->
<template>
  <div style="width: 100%;height: 100%;overflow-x:hidden;overflow-y:hidden">
    <div style="margin-left: 10px;" class="title">
      <label>API613标准</label>
    </div>
    <div class="box1">
      <div style="display: flex;">
        <div style="width: 30%;text-align: left;margin-left: 5px;" class="title">
          <label class="fence_control">设计输入参数</label>
        </div>
        <div style="width: 30%;text-align: left;margin-left: 5px;" class="title">
          <label class="fence_control">校核输入参数</label>
        </div>
        <div style="width: 30%;text-align: left;margin-left: 5px;" class="title">
          <label class="fence_control">输出结果</label>
        </div>
      </div>
      <div style="display: flex;height: 75%;">
        <div class="box2">
            <div style="height: 25%;width: 100%;display: flex">
              <div style="width: 50%;text-align: right">
                <div style="height: 12px;"></div>
                <label>内径与外径比值</label>
              </div>
              <div style="width: 40%;text-align: center">
                <input type="text" value="0.6" v-model="input1.x_design">
              </div>
            </div>
            <div style="height: 25%;width: 100%;display: flex">
          <div style="width: 50%;text-align: right">
            <div style="height: 12px;"></div>
            <label>额定扭矩(Nm)</label>
          </div>
          <div style="width: 40%;text-align: center">
            <input type="text" value="1000" v-model="input1.Tdesign">
          </div>
        </div>
            <div style="height: 25%;width: 100%;display: flex">
          <div style="width: 50%;text-align: right">
            <div style="height: 12px;"></div>
            <label>布氏硬度HB</label>
          </div>
          <div style="width: 40%;text-align: center">
            <input type="text" value="300" v-model="input1.HB_design">
          </div>
        </div>
            <div style="height: 25%;width: 100%;display: flex">
          <div style="width: 50%;text-align: right">
            <div style="height: 12px;"></div>
            <label>最小安全系数</label>
          </div>
          <div style="width: 40%;text-align: center">
            <input type="text" value="1.2" v-model="input1.SD_613_min">
          </div>
        </div>
      </div>
        <div class="box2">
          <div style="height: 20%;width: 100%;display: flex">
            <div style="width: 50%;text-align: right">
              <div style="height: 10px;"></div>
              <label>轴外径(mm)</label>
            </div>
            <div style="width: 40%;text-align: center">
              <input type="text" value="100" v-model="input2.do1">
            </div>
          </div>
          <div style="height: 20%;width: 100%;display: flex">
            <div style="width: 50%;text-align: right">
              <div style="height: 10px;"></div>
              <label>轴内径(mm)</label>
            </div>
            <div style="width: 40%;text-align: center">
              <input type="text" value="60" v-model="input2.di">
            </div>
          </div>
          <div style="height: 20%;width: 100%;display: flex">
            <div style="width: 50%;text-align: right">
              <div style="height: 10px;"></div>
              <label>额定扭矩T(Nm)</label>
            </div>
            <div style="width: 40%;text-align: center">
              <input type="text" value="1000" v-model="input2.Tin">
            </div>
          </div>
          <div style="height: 20%;width: 100%;display: flex">
            <div style="width: 50%;text-align: right">
              <div style="height: 10px;"></div>
              <label>布氏硬度(HB)</label>
            </div>
            <div style="width: 40%;text-align: center">
              <input type="text" value="300" v-model="input2.HB">
            </div>
          </div>
          <div style="height: 20%;width: 100%;display: flex">
            <div style="width: 50%;text-align: right">
              <div style="height: 10px;"></div>
              <label>要求最小安全系数</label>
            </div>
            <div style="width: 40%;text-align: center">
              <input type="text" value="1.2" v-model="input2.S_613_min">
            </div>
          </div>
        </div>
        <div class="box2">
          <div style="height: 5%;"></div>
          <div style="height: 30%;width: 100%;display: flex">
            <div style="width: 50%;text-align: right">
              <label>设计最小轴径(mm):</label>
            </div>
            <div style="width: 5%;"></div>
            <div style="width: 20%;text-align: left">
              {{s1}}
            </div>
          </div>
          <div style="height: 30%;width: 100%;display: flex">
            <div style="width: 50%;text-align: right">
              <label>校核安全系数:</label>
            </div>
            <div style="width: 5%;"></div>
            <div style="width: 20%;text-align: left">
              {{s2_1}}
            </div>
          </div>
          <div style="height: 30%;width: 100%;display: flex">
            <div style="width: 50%;text-align: right">
              <label>是否满足要求:</label>
            </div>
            <div style="width: 5%;"></div>
            <div style="width: 20%;text-align: left">
              {{s2_2}}
            </div>
          </div>
        </div>
      </div>
      <div style="display: flex;margin-top: 2px;">
        <div style="width: 30%;margin-left: 5px;" align="right">
          <button @click="c1">计算</button>
        </div>
        <div style="width: 30%;margin-left: 2px;" align="right">
          <button @click="c2">计算</button>
        </div>
      </div>
    </div>
    <div style="margin-left: 10px" class="title">
      <label>国标计算方法</label>
    </div>
    <div class="box5">
      <div style="display: flex;">
        <div style="width: 30%;text-align: left;margin-left: 5px;" class="title">
          <label>扭转强度输入参数</label>
        </div>
        <div style="width: 30%;text-align: left;margin-left: 5px;" class="title">
          <label>扭转刚度输入参数</label>
        </div>
        <div style="width: 30%;text-align: left;margin-left: 5px;" class="title">
          <label>输出结果(取满足结果最大值)</label>
        </div>
      </div>
      <div style="display: flex;margin-left: 5px;margin-right: 5px;height: 65%;">
        <div class="box2">
          <div style="height: 33%;width: 100%;display: flex">
            <div style="width: 50%;text-align: right">
              <div style="height: 10px;"></div><label>额定扭矩T(Nm)</label>
            </div>
            <div style="width: 40%;text-align: center">
              <input type="text" value="1000" v-model="input3.TCMH">
            </div>
          </div>
          <div style="height: 33%;width: 100%;display: flex">
            <div style="width: 50%;text-align: right">
              <div style="height: 10px;"></div><label>内径与外径比值</label>
            </div>
            <div style="width: 40%;text-align: center">
              <input type="text" value="0.6" v-model="input3.x_CMH">
            </div>
          </div>
          <div style="height: 33%;width: 100%;display: flex">
            <div style="width: 50%;text-align: right">
              <div style="height: 10px;"></div><label>许用剪切应力</label>
            </div>
            <div style="width: 40%;text-align: center">
              <input type="text" value="30" v-model="input3.tp">
            </div>
          </div>
        </div>
        <div class="box2">
          <div style="height: 33%;width: 100%;display: flex">
            <div style="width: 50%;text-align: right">
              <div style="height: 10px;"></div><label>额定扭矩T(Nm)</label>
            </div>
            <div style="width: 40%;text-align: center">
              <input type="text" value="1000" v-model="input4.TCMH">
            </div>
          </div>
          <div style="height: 33%;width: 100%;display: flex">
            <div style="width: 50%;text-align: right">
              <div style="height: 10px;"></div><label>内径与外径比值</label>
            </div>
            <div style="width: 40%;text-align: center">
              <input type="text" value="0.6" v-model="input4.x_CMH">
            </div>
          </div>
          <div style="height: 33%;width: 100%;display: flex">
            <div style="width: 50%;text-align: right">
              <div style="height: 10px;"></div><label>每米轴长允许转角(°/m)</label>
            </div>
            <div style="width: 40%;text-align: center">
              <input type="text" value="1" v-model="input4.tps">
            </div>
          </div>
        </div>
        <div class="box2">
          <div style="height: 10%;"></div>
          <div style="height: 40%;width: 100%;display: flex">
            <div style="width: 50%;text-align: right">
              <label>满足强度的最小轴径(mm):</label>
            </div>
            <div style="width: 5%;"></div>
            <div style="width: 20%;text-align: left">
              {{s3}}
            </div>
          </div>
          <div style="height: 40%;width: 100%;display: flex">
            <div style="width: 50%;text-align: right">
              <label>满足刚度的最小轴径(mm):</label>
            </div>
            <div style="width: 5%;"></div>
            <div style="width: 20%;text-align: left">
              {{s4}}
            </div>
          </div>
        </div>
      </div>
      <div style="display: flex;">
        <div style="width: 30%;margin-left: 5px;margin-top: 2px;" align="right">
          <button @click="c3">计算</button>
        </div>
        <div style="width: 30%;margin-left: 5px;margin-top: 2px;" align="right">
          <button @click="c4">计算</button>
        </div>
      </div>
    </div>
    <div style="margin-left: 10px;" class="title">
      <label>美国机械设计手册</label>
    </div>
    <div class="box6">
      <div style="display: flex;">
        <div style="width: 30%;text-align: left;margin-left: 5px;" class="title">
          <label class="fence_control">输出结果</label>
        </div>
        <div style="width: 30%;text-align: left;margin-left: 5px;" class="title">
          <label class="fence_control">输出结果</label>
        </div>
      </div>
      <div style="display: flex;margin-left: 5px;margin-right: 5px;height: 80%;">
        <div class="box2">
          <div style="height: 33%;width: 100%;display: flex">
            <div style="width: 50%;text-align: right">
              <div style="height: 10px;"></div><label>额定扭矩T(Nm)</label>
            </div>
            <div style="width: 40%;text-align: center">
              <input type="text" value="1000" v-model="input5.T">
            </div>
          </div>
          <div style="height: 33%;width: 100%;display: flex">
            <div style="width: 50%;text-align: right">
              <div style="height: 10px;"></div><label>内径与外径比值</label>
            </div>
            <div style="width: 40%;text-align: center">
              <input type="text" value="0.6" v-model="input5.x">
            </div>
          </div>
          <div style="height: 33%;width: 100%;display: flex">
            <div style="width: 50%;text-align: right">
              <div style="height: 10px;"></div><label>轴的类型</label>
            </div>
            <div style="width: 40%;text-align: center">
              <select name="" id="" v-model="input5.s">
                <option value="1">短轴</option>
                <option value="2">其它轴</option>
              </select>
            </div>
          </div>
        </div>
        <div style="width: 30%;height: 100%;">
          <div style="width: 99%;height: 40%;margin-left: 5px;box-shadow: 1.5px 1.5px 2px #aaaaaa;border: 0.5px solid rgba(231, 231, 231, 0.486);border-radius: 3px;">
            <div style="height: 100%;width: 100%;display: flex">
              <div style="width: 50%;text-align: right">
                <label>满足要求的最小轴径(mm):</label>
              </div>
              <div style="width: 5%;"></div>
              <div style="width: 20%;text-align: left">
                {{s5}}
              </div>
            </div>
          </div>
          <div style="width: 99%;margin-top: 1%;" align="right">
            <button @click="c5">计算</button>
          </div>
        </div>
        <div style="text-align: left;margin-left: 1%;">
          注：每米轴长允许的转角[Φ]选用推荐
          <br>
          如下：要求精密、平稳、可靠度高的传
          <br>
          动取[Φ]=0.25°~0.5°/m，一般传动可取
          <br>
          ［Φ]=0.5°~1.0°/m。
        </div>
      </div>
    </div>
    <div style="margin-left: 10px;" class="title">
      <label>常用材料许用剪切应力参考表</label>
    </div>
    <div class="box7">
      <img :src="img" alt="C" style="width: 100%;height: 100%;"/>
    </div>
  </div>
</template>

<script>
import {gear1, gear2, gear3, gear4, gear5} from "../../api/file";

export default {
  created () {
    document.title = '参考最小轴径计算' //模块中文名
    this.$store.state.file.key = 17 //设置key为自己的页面编号
  },
  name: "API613_Check_Min_shaft_diameter",
  data(){
    return{
      //这个地方直接把参数换成this.$store.state.file.dataList[]
      params_19:this.$store.state.file.dataList[17],
      input5:{
        T:"1000",
        x:"0.6",
        s:"1",
      },
      input2:{
        do1:"100",  //轴外径 (mm)
        di:"60",  //轴内径 (mm)
        Tin:"1000",  //额定扭矩 T (Nm)
        HB:"300",  //布氏硬度 (HB)
        S_613_min:"1.2",  //要求最小安全系数
      },
      input1:{
        Tdesign:"1000",  //Tdesign-额定扭矩 (Nm)
        HB_design:"300",  //HB_design-布氏硬度 HB
        SD_613_min:"1.2",  //SD_613_min-最小安全系数
        x_design:"0.6",  //x_design-内径与外径比值
      },
      input3:{
        TCMH:"1000",  //额定扭矩 T (Nm)
        x_CMH:"0.6",  //内径与外径比值
        tp:"30",  //许用剪切应力 (MPa)
      },
      input4:{
        TCMH:"1000",  //额定扭矩 T (Nm)
        x_CMH:"0.6",  //内径与外径比值
        tps:"1",  //每米轴长允许转角 (°/m)
      },
      s1:"",
      s2_1:"",
      s2_2:"",
      s3:"",
      s4:"",
      s5:"",
      img:require("@/assets/image/img_17_1.jpg"),
    }
  },
  methods: {
    c5(){
      gear5(this.input5)
        .then(res=>{
          console.log(res);
            this.s5=res[0];
        })
       .catch(error=>{
        console.log(error);
      });
    },
    c2(){
      gear2(this.input2)
          .then(res=>{
            console.log(res);
              this.s2_1=res[0];
              this.s2_2=res[1];
          })
          .catch(error=>{
            console.log(error);
          });
    },
    c1(){
      gear1(this.input1)
          .then(res=>{
            console.log(res);
              this.s1=res[0];
          })
          .catch(error=>{
            console.log(error);
          });
    },
    c3(){
      gear3(this.input3)
          .then(res=>{
            console.log(res);
              this.s3=res[0];
          })
          .catch(error=>{
            console.log(error);
          });
    },
    c4(){
      gear4(this.input4)
          .then(res=>{
            console.log(res);
/*            if(res.code==200){*/
              this.s4=res[0];
/*            }*/
          })
          .catch(error=>{
            console.log(error);
          });
    },
  }
}
</script>

<style scoped>
*{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.box1{
  height: 30%;
  margin-top: 5px;
  margin-left: 10px;
  margin-right: 10px;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.box2{
  margin-left: 5px;
  width: 30%;
  height: 95%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
  text-overflow: ellipsis;
}
.box5{
  margin-top: 5px;
  height: 21%;
  margin-left: 10px;
  margin-right: 10px;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.box6{
  margin-top: 5px;
  height: 20%;
  margin-left: 10px;
  margin-right: 10px;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.box7{
  width: 50%;
  height: 10%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.fence_control{
  white-space: nowrap;
}
input{
  width: 85px;
  margin-top: 1%;
  text-align: center;
}

select{
  margin-top: 5px;
  width: 85px;
  height: 25px;
}
.title {
  font-size: 17.5px;
  background-color: #EEEEEE;
  border-radius: 3px;
  padding-left: 3%;
  font-weight: bolder;
  white-space: nowrap;
}
button{
  width: 30%;
  background-color: #16D585;
  height: 100%;
}
</style>
